<template>
  <section>
    <el-form class="toolbar" label-width="80px" style="margin-top:10px;padding-top:20px;">
      <el-row>
       
        <el-col :span="6">
          <el-form-item label="日期">
            <el-date-picker
              v-model="dateValue"
              type="daterange"
              @change="datechange"
              style="width:100%"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="shousuo">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table highlight-current-row :data="dataList" style="width: 100%;">
      <el-table-column align="center" prop="taskId" label="任务id"></el-table-column>
      <el-table-column align="center" label="金额">
        <template slot-scope="scope">{{scope.row.bonus/100}} 元</template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="日期"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注"></el-table-column>
      
    </el-table>

    <div style="padding:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </section>
</template>

<script>
import {gettime} from "../../utils/formData";  
export default {
  data() {
    return {
      total: 0,
      page: 1,
      size: 10,
      dataList: [],
      dateValue: "",
      begin: "",
      end: "",
    };
  },
  methods: {
    shousuo: function() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          Authorization: sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          domain: "taobao.tianyalei.com"
        },
        url:
          "/income?page=" +
          (that.page - 1) +
          "&size=" +
          that.size +
          "&begin=" +
          that.begin +
          "&end=" +
          that.end
      }).then(function(response) {
        if (response.data.code == 200) {
          that.dataList = response.data.data.list;
          that.total = response.data.data.totalCount;
          for(var i=0;i<that.dataList.length;i++){
						 that.dataList[i].createTime=gettime(that.dataList[i].createTime)
					}
        }
      });
    },
    datechange(e) {
      this.begin = e.split("至")[0];
      this.end = e.split("至")[1];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.shousuo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.shousuo();
		}
  },

  created() {
    this.shousuo();
  }
};
</script>